<template>
	<view class="body">
		<view class="topbar">
			<view class="item">
				<view class="left">寄</view>
				<view class="right">
					<view class="top">
						<view class="title">
							<input type="text" disabled v-model="info.name">
						</view>
						<view class="phone">
							<input type="text" disabled v-model="info.name">
						</view>
					</view>
					<view class="center">
						<input type="text">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">收</view>
				<view class="right">
					<view class="top">
						<view class="title">
							<input type="text" disabled v-model="info.name">
						</view>
						<view class="phone">
							<input type="text" disabled v-model="info.name">
						</view>
					</view>
					<view class="center">
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="li">
				<view class="label">上门取件时间</view>
				<view class="value">
					<text>上门取件时间</text>
				</view>
			</view>
			<view class="li">
				<view class="label">物品描述</view>
				<view class="value">
					<input type="text" disabled>
				</view>
			</view>
			<view class="li">
				<view class="label">重量</view>
				<view class="value">
					<input type="text" disabled>KG
				</view>
			</view>
			<view class="li">
				<view class="label">尺寸</view>
				<view class="value">
					<text>尺寸</text>
				</view>
			</view>
			<view class="li li_">
				<view class="label">图片</view>
				<view class="value">
					<view class="img-list" v-for="(item,index) in 3" :key="index">
						<image :src="item.url"></image>
					</view>
					<view class="img-list placeholder"></view>
				</view>
			</view>
			<view class="li li_">
				<view class="label">备注</view>
				<view class="value">
					<textarea disabled></textarea>
				</view>
			</view>
			<view class="li">
				<view class="label">赏金</view>
				<view class="value">
					<input style="font-size: 36upx;color: #ff0000;" type="number" disabled placeholder="￥0.00">
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="btn" @click="handleEdit">编辑</view>
			<view class="btn btn2" @click="handleDel">删除</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
			}
		},
		onLoad(options) {
			// this.getInfo()
		},
		methods: {
			//获取详情
			getInfo() {
				// this.$Api.getRewardInfo({rid:""}).then(res => {
				// 	console.log('获取详情', res)
				// }, err => {
				// 	console.log(err)
				// })
			},
			//编辑
			handleEdit() {
				uni.navigateTo({
					url: "/pages/user/editPublish"
				})
			},
			//删除
			handleDel() {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success(res) {
						if (res.confirm) {
							// this.$Api.delTask({rid:""}).then(res => {
							// 	console.log('我要接单', res)
							// 	this.$refs.uToast.show({
							// 		title: "恭喜您,接单成功！",
							// 		type: 'success',
							// 	})
							// 	setTimeout(() => {
							// 		uni.navigateBack()
							// 	}, 2000)
							// }, err => {
							// 	console.log(err)
							// })
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 94%;
		background: #fff;
		margin: 30upx auto;
		border-radius: 20upx;
		padding: 30upx;

		.topbar {
			.item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 2upx solid #e5e5e5;
				padding: 30upx 0;

				&:last-child {
					.left {
						background: #fd6324;
					}
				}

				.left {
					width: 140upx;
					height: 140upx;
					border-radius: 50upx;
					flex-shrink: 0;
					background: #f59935;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40upx;
					font-weight: bold;
					color: #fff;
				}

				.right {
					flex: 1;
					margin-left: 30upx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20upx 0;

						.title {
							border-right: 2upx solid #e5e5e5;
						}

						.title,
						.phone {
							width: 48%;

							input {
								width: 100%;
								font-size: 28upx;
								color: #414141;
								border: none;
								outline: none;
								background: none;
							}
						}
					}

					.center {
						border-top: 2upx solid #e5e5e5;
						padding: 20upx 0;

						input {
							width: 100%;
							font-size: 28upx;
							color: #414141;
							border: none;
							outline: none;
							background: none;
						}
					}
				}
			}
		}

		.card {
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				padding: 30upx 0;
				border-bottom: 2upx solid #e5e5e5;

				&.li_ {
					flex-wrap: wrap;

					.label {
						width: 100%;
					}

					.value {
						width: 100%;
						margin-top: 20upx;

						.img-list {
							width: 200upx;
							height: 200upx;
							flex-shrink: 0;
							overflow: hidden;
							border-radius: 20upx;
							margin-right: 20upx;
							margin-bottom: 20upx;

							&:nth-child(3n) {
								margin-right: 0;
							}

							&.placeholder {
								width: 200upx;
								height: 0;
								margin-top: 0;
							}

							image {
								width: 100%;
								height: 100%;
								display: block;
								margin: 0 auto;
							}
						}

						textarea {
							width: 100%;
							height: 200upx;
							border: 2upx solid #E5E5E5;
							border-radius: 10upx;
							font-size: 28upx;
							padding: 20upx;
						}
					}
				}

				.label {
					color: #999;
				}

				.value {
					color: #414141;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						margin-right: 10upx;
					}

					input {
						width: 100%;
						font-size: 28upx;
						color: #414141;
						border: none;
						outline: none;
						background: none;
						text-align: right;
						margin-right: 10upx;
					}
				}
			}
		}

		.submit {
			width: 100%;
			margin-top: 50upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 48%;
				padding: 30upx 0;
				background: #4094ff;
				border-radius: 60upx;
				text-align: center;
				color: #fff;

				&.btn2 {
					background: #fb5555;
				}
			}
		}
	}
</style>